<template>
  <ContentContainer
    :show-pagination="false"
    :show-footer="false"
    :refresh="false"
    inner>
    <a-form
      ref="formRef"
      :model="form"
      :rules="rules"
      layout="vertical"
      class="overflow-hidden"
      scroll-to-first-error>
      <a-form-item
        field="origin_server.protocol"
        label="回源协议"
        hide-asterisk
        asterisk-position="end">
        <a-select
          v-model="form.origin_server.protocol"
          placeholder="请选择回源协议"
          class="!w-100">
          <a-option
            v-for="i in protocolOptions"
            :key="i.value"
            :value="i.value"
            :label="i.label" />
        </a-select>
      </a-form-item>
      <a-form-item
        field="origin_server.algorithm"
        label="回源类型"
        asterisk-position="end"
        hide-asterisk
        required>
        <a-radio-group v-model="form.origin_server.algorithm">
          <a-radio
            v-for="item in priorityTypeOptions"
            :key="item.value"
            :value="item.value"
            >{{ item.label }}</a-radio
          >
        </a-radio-group>
      </a-form-item>
      <a-form-item
        required
        label="源站配置"
        hide-asterisk
        asterisk-position="end"
        class="!w-full">
        <source-site-table
          ref="sourceTableRef"
          class="!w-200"
          v-model:list="form.origin_server.origin_list"
          :algorithm="form.origin_server.algorithm" />
      </a-form-item>
      <a-form-item
        field="hostType"
        label="回源 HOST"
        asterisk-position="end"
        hide-asterisk
        class="!mb-0"
        required>
        <a-radio-group v-model="form.hostType">
          <a-radio :value="false">默认（域名本身）</a-radio>
          <a-radio :value="true">自定义</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        v-if="form.hostType"
        field="origin_server.origin_host"
        hide-label
        asterisk-position="end"
        :required="form.hostType">
        <a-input
          v-model="form.origin_server.origin_host"
          placeholder="请输入自定义域名"
          class="!w-100" />
      </a-form-item>
    </a-form>
    <a-button type="primary" class="mt-6" @click="handleSave"
      >保存配置</a-button
    >
  </ContentContainer>
</template>
<script lang="ts" setup>
import type { SiteOriginParams } from '@/apis/model/site'
import { getApiSiteOriginServerDetailApi } from '@/apis/modules/site'
import { updateApiSiteOriginServerApi } from '@/apis/modules/site/site'
import type { FieldRule, FormInstance } from '@arco-design/web-vue'
import { omit } from 'lodash-es'
import { v4 as uuidV4 } from 'uuid'
const route = useRoute()
const formRef = ref<FormInstance>()
const id = computed(() => route.params.id as string)
const form = reactive<SiteOriginParams>({
  hostType: false,
  origin_server: {
    algorithm: 'swrr',
    origin_host: '',
    protocol: null,
    origin_list: [{ uuid: uuidV4(), priority: 1, host: '', port: null }]
  }
})
const rules: Record<string, FieldRule[]> = {
  'origin_server.protocol': [{ required: true, message: '请选择回源协议' }],
  'origin_server.origin_host': [
    { required: true, message: '请输入自定义域名' },
    { validator: validateDomain }
  ]
}
const { request } = useRequest(getApiSiteOriginServerDetailApi, {
  auto: true,
  params: { id: id.value },
  success: (res) => {
    Object.assign(form, res)
    if (form.origin_server.origin_host) form.hostType = true
  }
})
watchEffect(() => {
  request({ id: id.value })
})
const sourceTableRef = ref()

const handleSave = async () => {
  const error = await formRef.value?.validate()
  const error1 = await sourceTableRef.value.validate()
  if (error) return false
  for (let i = 0; i < error1.length; i++) {
    if (error1[i]) {
      return false
    }
  }
  const data = { ...omit(form, 'hostType'), id: id.value }
  if (!form.hostType) data.origin_server.origin_host = ''
  updateApiSiteOriginServerApi({ ...data })
  ToastUtils.success('操作成功')
}
</script>

<style lang="less" scoped></style>
